{% extends 'easydisAPSBundle::base_template.html.twig' %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/easydisAPS/css/css-template/fullcalendar.css') }}" />
{% endblock %}
    
{% block scripts %}
    <script src="{{ asset('bundles/easydisAPS/js-template/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('bundles/easydisAPS/js-template/maruti.js') }}"></script>
    <script src="{{ asset('bundles/easydisAPS/js-template/maruti.calendar.js') }}"></script>
    
   <script>
   
   </script>
{% endblock %}
    
{% block style %}
    
	table {
		overflow:hidden;
		border:1px solid #d3d3d3;
		background:#fefefe;
		width:100%;
		/*margin:5% auto 0;*/
		-moz-border-radius:5px; /* FF1+ */
		-webkit-border-radius:5px; /* Saf3-4 */
		border-radius:5px;
		-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	}
	
	th {padding:18px 28px 18px; text-align:center; }
        
        td {padding:5px 5px 5px; text-align:center; }
	
	th {padding-top:18px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb; color: #000;}
	
	td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
	
	tr.odd-row td {background:#f6f6f6;}
	
	td.first, th.first {text-align:left}
	
	td.last {border-right:none;}
	

	/*
        td {
		background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
		background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
	}*/
	
	tr.odd-row td {
		background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
		background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
	}
	
	th {
		background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
		background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
	}
	

	
	tr:first-child th.first {
		-moz-border-radius-topleft:5px;
		-webkit-border-top-left-radius:5px; /* Saf3-4 */
	}
	
	tr:first-child th.last {
		-moz-border-radius-topright:5px;
		-webkit-border-top-right-radius:5px; /* Saf3-4 */
	}
	
	tr:last-child td.first {
		-moz-border-radius-bottomleft:5px;
		-webkit-border-bottom-left-radius:5px; /* Saf3-4 */
	}
	
	tr:last-child td.last {
		-moz-border-radius-bottomright:5px;
		-webkit-border-bottom-right-radius:5px; /* Saf3-4 */
	}
        
        .larger { 
            width: 500px;
        }
        
        td.cat {
            background-color: #e7eaeb;
            font-weight: bold;
            color: #000;
        }
        
{% endblock %}


    
{% block contenu %}
    
{% for flashMessage in app.session.flashbag.get('notice') %}
    {% if flashMessage %}
            <div class="notice">
                    {{ flashMessage }}
                    <br/><br/>
            </div>
    {% endif %}
{% endfor %}

<div class="row-fluid">
    <div class="span12">				
        <div class="widget-box widget-calendar">
            <div class="widget-title">
                <span class="icon"><i class="icon-calendar"></i></span>
                <h5>Vision CP/RTT</h5>
                <div class="buttons">
                    <a id="add-event" data-toggle="modal" href="#modal-add-event" class="btn btn-inverse btn-mini"><i class="icon-plus icon-white"></i> Ajouter un évenement</a>
                    <div class="modal hide" id="modal-add-event">
                       <div class="modal-header">
                           <button type="button" class="close" data-dismiss="modal">×</button>
                           <h3>Ajouter une nouvel évenement</h3>
                       </div>
                       <div class="modal-body">
                           <p>Libellé de l'évenement :</p>
                           <p><input id="event-name" type="text" /></p>
                       </div>
                       <div class="modal-footer">
                           <a href="#" class="btn" data-dismiss="modal">Annuler</a>
                           <a href="#" id="add-event-submit" class="btn btn-primary">Ajouter évenement</a>
                       </div>
                    </div>
                </div>
            </div>
            <div class="widget-content">
                <div class="panel-left">
                        <div id="fullcalendar"></div>
                </div>
                <div id="external-events" class="panel-right">
                    <div class="panel-title"><h5>Placer les évenements dans le calendrier</h5></div>
                    <div class="panel-content">
                        <div class="external-event ui-draggable label label-inverse">Test 1</div>
                        <div class="external-event ui-draggable label label-inverse">Test 2</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}